<template>
  <a-tabs type="card" :active-key="$route.fullPath">
    <a-tab-pane :key="item.fullPath" v-for="item in tagNavs">
      <div slot="tab" class="tab">
        <a-icon
          type="sync"
          v-if="$route.fullPath === item.fullPath"
          @click="() => $app.reload()"
        />
        <div class="title" @click="handleTagChange(item.fullPath)">
          {{ item.meta.title }}
        </div>
        <a-icon
          class="icon-close"
          type="close"
          @click="remove(item)"
          v-if="tagNavs.length > 1"
        />
      </div>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  inject: ["$app"],
  computed: {
    ...mapGetters(["tagNavs"])
  },
  methods: {
    ...mapActions(["removeTagNav"]),
    handleTagChange(path) {
      this.$router.push(path);
    },
    remove(route) {
      const tagNavs = this.tagNavs;

      const length = tagNavs.length;
      const index = tagNavs.findIndex(item => item.name === route.name);

      if (route.fullPath === this.$route.fullPath) {
        if (index == length - 1) {
          this.$router.push(this.tagNavs[length - 2].fullPath);
        } else {
          this.$router.push(this.tagNavs[index + 1].fullPath);
        }
      }
      this.removeTagNav(route);
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.ant-tabs-bar {
  border-bottom: none;
  margin-bottom: 0;
}

.tab {
  margin: 0 -16px;
  padding: 0 16px;
  font-size: 14px;
  user-select: none;
  transition: all 0.2s;
  .title {
    display: inline-block;
    height: 100%;
  }
  .icon-close {
    font-size: 12px;
    margin-left: 6px;
    margin-right: -4px !important;
    color: @text-color;
    &:hover {
      color: @text-color;
    }
  }
  .icon-sync {
    margin-left: -4px;
    color: @primary-4;
    transition: all 0.3s ease-in-out;
    &:hover {
      color: @primary-color;
    }
    font-size: 14px;
    &.hide {
      font-size: 0;
    }
  }
}
</style>
